<template>
  <div class="container">
    <van-skeleton title avatar :row="3" row-width="100vw" :loading="!state.init">
      <onepagecard  class="onepage-card" height="400px" :club_id="state.page" >
        <template v-slot:club-image>
          <img :src="state.card_value[state.page].avatar" alt="社团图片">
        </template>
        <template v-slot:card_title>{{state.card_value[state.page].name}}</template>
        <template v-slot:card_description>{{state.card_value[state.page].desc}}</template>
        <template v-slot:card_content><div v-html="state.card_value[state.page].content"></div></template>
        <template v-slot:card_intro> <div v-html="state.card_value[state.page].content"></div></template>
      </onepagecard>
      <br/>
      <template v-if="state.init">
        <van-slider v-model="state.value" @change="changePage()">
          <template #button>
            <div class="custom-button">{{ state.page }}</div>
          </template>
        </van-slider>
        <van-pagination
            v-model="state.page"
            :page-count="state.card_value.length-1"
            :show-page-size="8"
            force-ellipses
            @change="changePageByPagination()"
        />
      </template>
    </van-skeleton>
    <br />
    <br />
    <br />
  </div>
</template>

<script lang="ts">
import onepagecard from "./mobile_card.vue";
import { useStore} from "vuex";
import {IClub, ICLubInfo, IMobileStore, IPagination} from "../../../interface"
import {useRouter} from "vue-router";
import {reactive, ref} from "vue";
import {Notify} from "vant";

export default {
  setup() {
    const debug = true;
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      init: false,
      page: 1,
      card_value: [] as IClub[],
      value: 0,
    })
    if (!!router.currentRoute.value.query.id && parseInt(router.currentRoute.value.query.id.toString()) != NaN) {
      state.page = parseInt(router.currentRoute.value.query.id.toString());
    } else {
      state.page = 1
    }
    /**
     * 页面加载完成 即社团数据加载完成
     */
    const loadPage = async function () {
      let flags = [ ] as any
      if (!state.init) {
        let flag: boolean = true;
        let index: number = 0;
        let size: number = 20;
        while (flag) {
          let obj: any = await fetch("api/club/?page=" + index + "&size=" + size)
          let result: IPagination<any> = await obj.json();
          for (const resultElement of result.items) {
            flags.push({id:resultElement.id,ready:false});
            state.card_value[resultElement.id]={
              id: resultElement.id,
              desc: resultElement.introduction,
              name: resultElement.name,
              avatar: resultElement.favicon.path,
              content:""
            }
            for (let f of flags){
              if(f.id == resultElement.id){
                f.ready= true;
              }
            }

          }
          if (!result.page_info.has_next_page) {
            flag = false;
          }
        }

      }
      var flagHandle = setInterval(()=>{
        let tflag = true;
        if(debug){
          console.log(flags)
        }
        for( const f of flags){
          if( f.ready == false) {
            tflag = false;
          }
        }
        if(tflag){
          clearInterval(flagHandle);
          state.value = state.page * (100 / (state.card_value.length - 1 ) );
          state.init = true;
        }
      },500)
    }
    loadPage();
    const changePage = function(){
      state.page =  Math.ceil(state.value / (100 / (state.card_value.length - 1)))
      if(debug){
        console.log(state.value)
      }
    }
    const changePageByPagination = function(){
      state.value = state.page * (100 / (state.card_value.length - 1 ) );
    }
    return {
       store , state,changePage,changePageByPagination
    }
  },
  components: {
    onepagecard,
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 10px;
}

.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}

.onepage-card {
  margin-top: 32px;
}

.van-slider {
  margin-top: 15px;
  margin-bottom: 70px;
}
</style>
